<template>
  <div class="canvas-container" id="code-rain">
    <canvas canvas-id="myCanvas" id="myCanvas" />
    <h3>代码雨</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      
      const f_div = document.getElementById("code-rain")
      const width = f_div.clientWidth
      const height = f_div.clientWidth
      console.log(f_div)

      // const width = window.innerWidth
      // const height = window.innerHeight

      const canvas = document.getElementById("myCanvas")
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext("2d");

      const arr = Array(Math.ceil(width / 10)).fill(0);
      const strArr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");

      function rain() {
        ctx.fillStyle = "rgba(0,0,0,0.05)";
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = "#0f0";
        arr.forEach((value, index) => {
          const str = strArr[Math.floor(Math.random() * strArr.length)]
          ctx.fillText(str, index * 10, value + 10);
          // 值大于总高度了 或者 值大于一个随机数，从0开始
          arr[index] = (value >= height || value > 8888 * Math.random()) ? 0 : value + 10;
        });
      }
      // 无限循环的动画
      (function animloop(){
        rain()
        window.requestAnimationFrame(animloop)
      })()

      // 循环播放
      // setInterval(rain, 30);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
